<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>嵌套路由</title>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>

<body>
  <div id="app">
    <router-view></router-view>
  </div>

  <script>
    // 1. 定义路由组件
    // TODO: 「1」 我们在组件模板中添加了一个`router-view`, 用于嵌套的子组件渲染展示
    const User = {
      template: `
        <div class="user">
          <h2>USER {{ $route.params.id }}</h2>
          <router-view></router-view>
        </div>
      `
    };

    const UserHome = { template: '<div>User子路由的默认渲染</div>' };
    const Foo = { template: '<div>foo</div>' };
    const Bar = { template: '<div>bar</div>' };
    const NotFound = { template: '<div>404</div>' };

    // 2. 定义路由
    // TODO: 「2」 但是, 你想要使用嵌套路由, routes中的配置必不可少, 使用`children`参数
    const routes = [
      {
        // TODO: 「3」 要注意, 以`/`开头的嵌套路径会被当做根路径, 这让你可以充分的使用嵌套组件而无须设置嵌套的路径
        path: '/user/:id',
        component: User,
        children: [
          {
            path: '',
            component: UserHome
          },
          // TODO: 「4」 基于下面的配置, 当你成功匹配 /user/:id 时, User的出口「router-view」是不会渲染任何东西的
          // 这是因为没有匹配到合适的子路由, 如果你想渲染点什么, 可以这样写: 看上边
          {
            // 当路由为 /user/:id/foo 时匹配成功
            // 注！！！ :id使我们的动态路由, 还记得吗? 不记得回去看一下
            // Foo 就会被渲染在 User 的`router-view`中
            path: 'foo',
            component: Foo
          },
          {
            // 当路由为 /user/:id/bar 时匹配成功
            path: 'bar',
            component: Bar
          },
          {
            // 当路由没有进入上面子路由的路由匹配中时, 匹配成功
            path: '*',
            component: NotFound
          }
        ]
      }
    ]

    // 3. 创建`router`实例
    const router = new VueRouter({
      routes
    })

    // 4. 创建`Vue`实例
    const app = new Vue({
      router
    }).$mount('#app');
  </script>
</body>

</html>